<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    table{
       width:620px;
       border:3px solid #ccc;
       border-collapse: collapse;
       margin:0 auto;
       margin-top:20px;
    }
    
    table th,table td{
        border:1px solid #ccc;
    }
    div.page-bar a{
    display:inline-block;
    margin-right: 3px;
    }
    div.go-bar input{
    
    width:30px;
    }
</style>
<script src="/mvc-demo08/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
    	 //页面加载完毕后执行
    	$.ajax({
    		/* 请求路径 RequestMapping*/
    		url:"/mvc-demo08/emp/list",
    		/*请求类型  Get Post Put Delete  restful*/
    		type:"GET",
    		/*服务器返回的数据类型*/
    		dataType:"JSON",
    		/*请求成功后执行的函数*/
    		success:function(data){//data是服务器返回的数据
    			lodaTable(data);
    		},
    		error:function(error){
    			  alert("请求数据失败");
    		}
    		
    	});
    });
    //声明全局变量保存当前的pageBean
    var pb;
	//页面加载数据
	function lodaTable(data){
		pb=data.pageBean;
			//清空原来的数据
			$("table tr:gt(0)").remove();
			//清空页码
			$("div.page-bar a").remove();
		  console.log(data);
	      var pageBean = data.pageBean
	      var es = pageBean.list;
	      //员工数据
	      for(var i=0 ;i<es.length;i++){
	    	       var e = es[i];
	    	       var dname = e.dept==null?'':e.dept.dname;
	    	       var mname = e.mgr==null?'':e.mgr.ename;
	    	       var $tr = 
	    	          $("<tr><td>"+e.empno+"</td><td>"+e.ename+"</td>"
	    	        		  +"<td>"+e.esex+"</td><td>"+e.eage+"</td>"
	    	        		  +"<td>"+e.esalary+"</td><td>"+dname+"</td>"
	    	        		  +"<td>"+mname+"</td>"
	    	        		  +"<td><a href='javascript:updateEmp(&quot;"+e.empno+"&quot;)'>修改</a>/<a href='javascript:delEmp(&quot;"+e.empno+"&quot;)'>删除</a></td></tr>");  		    	       
	    	       $("table").append($tr);
	      }
	      //页码
	      //首页
	      $("div.page-bar").append("<a href='javascript:changePage(1); '>首页</a>");
	      //上一页
	        $("div.page-bar").append("<a href='javascript:changePage("+pageBean.previousPage+");'>上一页</a>");
	      //数字页码
	       for(var i=1;i<=pageBean.last;i++){
	    	   $("div.page-bar").append("<a href='javascript:changePage("+i+");'>"+i+"</a>");
	       }
	      //下一页
	        $("div.page-bar").append("<a href='javascript:changePage("+pageBean.nextPage+");'>下一页</a>");
	      //尾页
	        $("div.page-bar").append("<a href='javascript:changePage("+pageBean.last+");'>尾页</a>");
	      //刷新总页数
	      $("#totalPages").html(pageBean.totalPages);
	}
	//跳转页面
	function changePage(no){
		//获得表单的dom对象
		$("#searchForm input[name=pageNo]").val(no);
		//使用ajax提交表单
		$.ajax({
			url:"/mvc-demo08/emp/list",
			type:"POST",
			data:$("#searchForm").serializeArray(),
			dataTpye:"JSON",
		success:function(data){
			lodaTable(data);
		},
		error:function(error){
			  alert("请求数据失败");
		}
		});
	}
	function goPage(){
		//
		var no =$("div.go-bar input[name=goNo]").val();
		if(no<1||no>pb.last||isNaN(no)){
			alert("请输入正确页码");
			return;
		}
		changePage(no);
			
		
	}
	//删除
	function delEmp(empno){
		console.log(empno);
		$.ajax({
			url:"/mvc-demo08/emp/Delete",
			type:"post",
		data:"empno="+empno,
			dataTpye:"JSON",
			success:function(data){//data是服务器返回的数据
    			if(data=="OK"){
    				location.href="ListEmp.html";
    			}
    		},
    		error:function(error){
    			  alert("请求数据失败");
    		}
		});
	}
	//修改
	function updateEmp(empno){
		console.log(empno);
		//跳转之前将empno保存到本地存储对象中
		sessionStorage.setItem("empno",empno);
		//跳转页面
		location.href="/mvc-demo08/view/UpdateEmp.html";
	}
</script>
</head>
<body>
     <p align="center">员工列表</p>
    <p align="center"><a href="/mvc-demo08/view/AddEmp.html">添加员工</a></p>
    <div align="center">
    	<form id="searchForm">
    	<input name="pageNo" type="hidden" value="1"/>
    	<input name="pageCondition"/>
    	<select name="pageSize">
    	<option value="3">3</option>
    	<option value="5">5</option>
    	<option value="10">10</option>
    	</select>
    	<input type="submit" value="搜索"/>
    	</form>
    </div>
     <table>
         <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>薪资</th>
            <th>部门</th>
            <th>经理</th>
            <th>操作</th>
         </tr>
     </table>
     <div class="page-bar" align="center">
     
     </div>
     <div align="center" class="go-bar">
     <button onclick="goPage()">go</button>
     <input name ="goNo"/>页/共x<span id="totalPages"></span>
     </div>
</body>
</html>